<template>
    <div class="swiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

    </div>
</template>

<script>
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

export default {
    props: {
        loop: {
            type: Boolean,
            default: true
        },
        slidesPerView: {
            type: Number,
            default: 1
        },
        spaceBetween: {
            type: Number,
            default: 10
        }
    },
    mounted() {
        let that = this
        var mySwiper = new Swiper('.swiper', {
            // direction: 'vertical', // 垂直切换选项
            loop: this.loop, // 循环模式选项
            slidesPerView: this.slidesPerView,
            spaceBetween: this.spaceBetween,
            // observer: true,//开启监听

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            on: {
                slideChange: function () {
                    // console.log("activeIndex为" + this.activeIndex);
                    // 这种方式可以访问到activeIndex
                    that.$emit("slideChange", this.activeIndex)
                }

                //下面这种方式mySwiper是个null
                // slideChange: () => {
                //     this.$emit("slideChange", mySwiper.activeIndex)
                // }
            }
        })
    }
}
</script>

<style scoped>
.swiper {
    width: 600px;
    height: 300px;
}
</style>